<template>
  <div class="h-full flex dt-page w-full p-3 flex-col">
    <div class="flex p-3 bg-white border border-dashed gap-3">
      <AButton type="primary" @click="ctrlRec.clickToSelectRow = !ctrlRec.clickToSelectRow">点击行选中</AButton>
      <AButton type="primary" @click="ctrlRec.tableSetting = !ctrlRec.tableSetting">控制右上角按钮</AButton>
      <AButton type="primary" @click="setTableSetting('onlyFrontDownload', true)">仅支持前端下载</AButton>
      <AButton type="primary" @click="setTableSetting('onlyBackDowonload', true)">仅支持后端下载</AButton>
      <AButton type="primary" @click="toggleSetting()">切换展示列控制</AButton>
      <AButton type="primary" @click="toggleFullScreen()">切换显示全屏</AButton>
      <AButton type="primary" @click="clearSelectOnPageChange()">分页改变清空复选框</AButton>
      <AButton type="primary" @click="ctrlRec.showIndexColumn = !ctrlRec.showIndexColumn">是否显示序列号</AButton>
      <AButton type="primary" @click="ctrlRec.showCheckboxColumn = !ctrlRec.showCheckboxColumn">是否显示复选框</AButton>
      <AButton type="primary" @click="loading = !loading">改变加载状态</AButton>
      <AButton type="primary" @click="reset()">重置所有</AButton>
    </div>

    <div class="flex-1 p-3 bg-white">
      <DtTable @register="registerTable"></DtTable>
    </div>

  </div>
</template>

<script lang="ts" setup>
import { DynamicProps } from '@zm-pkg/core'
import { useTable } from '@zm-pkg/ui'
import { BasicTableProps } from '@zm-pkg/ui/es/components/table/src/types/table'

type tableProp = Partial<DynamicProps<BasicTableProps>>

const loading = ref(true)
const ctrlRec = reactive<tableProp>({
  clickToSelectRow: false,
  tableSetting: {
    fullscreen: true
  },
  clearSelectOnPageChange: false,
  showIndexColumn: false,
  showCheckboxColumn: true,
  pagination: false
})

const dataSource = ref([])

setTimeout(() => {
  for(let i = 0; i < 1500; i++) {
    dataSource.value.push({
      id: i + 1,
      baseColumn1: Math.round(Math.random()),
      baseColumn2: Math.ceil(Math.random() * 2),
      baseColumn3: Math.ceil(Math.random() * 400000000),
      baseColumn4: Math.round(Math.random()),
      baseColumn5: (Math.round(Math.random() * 100)) / 100,
      baseColumn6: null
    })
  }

  loading.value = false
}, 200);

const props: tableProp = {
  loading,
  columns: [
    { title: '列1', dataIndex: 'baseColumn1' },
    { title: '列2', dataIndex: 'baseColumn2' },
    { title: '列3', dataIndex: 'baseColumn3' },
    { title: '列4', dataIndex: 'baseColumn4' },
    { title: '列5', dataIndex: 'baseColumn5' },
  ],
  dataSource,
  operations: [
    { label: '编辑', icon: 'mdi:text-box-edit-outline', onClick: () => alert('编辑'), auth: '' },
    { label: '删除', icon: 'mdi:delete-outline', onClick: () => alert('删除') ,auth: ''},
  ]
}

const [registerTable, { setProps }] = useTable( props )

watch(
    () => ctrlRec,
    v => {
      setProps(v as Partial<BasicTableProps>)
    },
    {
      deep: true
    }
)

function toggleFullScreen() {
  (ctrlRec.tableSetting as any).fullscreen = !(ctrlRec.tableSetting as any).fullscreen

  setProps({
    tableSetting: ctrlRec.tableSetting
  })
}

function toggleSetting() {
  ctrlRec.tableSetting = !ctrlRec.tableSetting

  setProps({
    tableSetting: ctrlRec.tableSetting
  })
}

function setTableSetting(prop, v) {
  setProps({
    tableSetting: {
      [prop]: v
    }
  })
}

function reset() {
  setProps(ctrlRec as Partial<BasicTableProps>)
}

function clearSelectOnPageChange() {
  setProps({
    clearSelectOnPageChange: true
  })
}

</script>

<style lang="less" scoped>
:deep(.dt-table){
  height: 100%;
}
</style>
